<template>
  <view>
    <!-- 搜索 -->
    <view class="serarch">
      <!-- <my-search bgc="#333333" :radius="0"></my-search> -->
      <my-search @click="goSearchPage"></my-search>
    </view>
    <!-- 轮播图 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <navigator class="swiper-item" :url="item.navigator_url" open-type="navigate">
          <!-- 
           5种
           navigateTo:跳转非tabbar页面
           redirectTo:跳转非tabbar
           switchTab:跳转tabbar页面
           reLaunch:关闭所有页面，再跳转至相应页面
           navigateBack:后退
           -->
          <image class="img" :src="item.image_src" mode="widthFix"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- // 分类导航 -->
    <view class="cate">
      <view @tap="goCate(index)" class="item" v-for="(item,index) in cateList" :key="index">
        <image :src="item.image_src" mode="widthFix"></image>
      </view>
    </view>
    <!-- 楼层  -->
    <view class="floor" v-for="(item,index) in floorList" :key="index">
      <view class="title">
        <image class="title_img" :src="item.floor_title.image_src" mode="widthFix"></image>
      </view>
      <view class="other">
        <view class="left">
          <image @tap="goList(item.product_list[0].name)" class="other_img"
            :style="{width:`${item.product_list[0].image_width}rpx`}" :src="item.product_list[0].image_src"
            mode="widthFix"></image>
        </view>
        <view class="right">
          <block v-for="(i,v) in item.product_list">
            <image @tap="goList(i.name)" class="other_img" :style="{width:`${i.image_width}rpx`}" :key="v"
              :src="i.image_src" mode="widthFix" v-if="v!==0">
            </image>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import setTabbar from '@/mixins/index.js'
  export default {
    mixins: [setTabbar],
    data() {
      return {
        swiperList: [],
        cateList: [],
        floorList: []
      };
    },
    async onLoad() {
      this.getSwiper()
      this.getCate()
      this.getFloorList()
    },
    methods: {
      // 轮播图
      async getSwiper() {
        const res = await uni.http.get('/home/swiperdata')
        this.swiperList = res.message
        console.log('轮播图', res);
      },
      // 分类导航
      async getCate() {
        const res = await uni.http.get('/home/catitems')
        this.cateList = res.message
        console.log('分类', res);
      },
      // 分类跳转
      goCate(index) {
        if (index === 0) {
          uni.switchTab({
            url: "/pages/cate/cate"
          })
        }
      },
      // 获取楼层数据
      async getFloorList() {
        const res = await uni.http.get('/home/floordata')
        this.floorList = res.message
        console.log('楼层', res);
      },
      // 跳转到列表
      goList(name) {
        uni.navigateTo({
          url: "/pages/list/list?key=" + name
        })
      },
      // 跳转到搜索页面
      goSearchPage() {
        console.log('goSearchPage');
        uni.navigateTo({
          url: "/pages/search/search"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .swiper {
    height: 350rpx;
  }

  .swiper-item {
    .img {
      width: 100%;
    }
  }

  .cate {
    display: flex;

    .item {
      width: 25%;
      text-align: center;

      image {
        width: 80%;
      }
    }
  }

  .floor {
    .title {
      padding: 15rpx 0;

      .title_img {
        width: 100%;
      }
    }

    .other {
      display: flex;

      .left {
        margin-left: 10rpx;
      }

      .other_img {
        padding-right: 10rpx;
      }
    }
  }

  .serarch {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }
</style>